<script setup name="music-list">
import {
  CalendarThirty,
  Radio,
  AudioFile,
  RankingList,
  VoiceOne,
  Cd,
  VideoOne,
  Rss,
  Record,
  CollectionRecords,
  Gamepad
} from '@icon-park/vue-next'
import { useRouter } from 'vue-router'
import IconPark from '@/components/common/IconPark.vue'

const router = useRouter()
const MenuList = [
  {
    icon: CalendarThirty,
    name: '每日推荐'
  },
  {
    icon: Radio,
    name: '私人漫游'
  },
  {
    icon: AudioFile,
    name: '歌单',
    path: '/square'
  },
  {
    icon: RankingList,
    name: '排行榜'
  },
  {
    icon: VoiceOne,
    name: '有声书'
  },
  {
    icon: Cd,
    name: '数字专辑'
  },
  {
    icon: VideoOne,
    name: '直播'
  },
  {
    icon: Rss,
    name: '关注新歌'
  },
  {
    icon: Record,
    name: '一歌一遇'
  },
  {
    icon: CollectionRecords,
    name: '收藏家'
  },
  {
    icon: Gamepad,
    name: '游戏专区'
  }
]

const toSquare = path => {
  if (path) router.push(path)
}
</script>

<template>
  <van-swipe :show-indicators="false" :width="84" :loop="false">
    <van-swipe-item v-for="item in MenuList" :key="item" @click="toSquare(item.path)">
      <div class="icon-slot">
        <IconPark :icon="item.icon" :size="8" fill="red" :strokeWidth="3" theme="filled" />
        <span class="icon-name">{{ item.name }}</span>
      </div>
    </van-swipe-item>
  </van-swipe>
</template>

<style scoped lang="scss">
.van-swipe {
  padding: 8px 0;

  .icon-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon-name {
      font-size: 12px;
    }
  }
}
</style>
